<script>
import axios from 'axios'; // 引入 axios 用于发送 HTTP 请求

export default {
  name: 'ConsultationView',
  data() {
    return {

      // messages: [
      //   { name: '李明明', message: '周五上午您有空吗' },
      //   { name: '李明明', message: '周五上午您有空吗' },
      //   { name: '李明明', message: '周五上午您有空吗' },
      //   { name: '李明明', message: '周五上午您有空吗' }
      // ]

      messages: [], // 初始化为空数组
      isLoading: true, // 用于显示加载状态
      error: null // 用于存储错误信息


    }
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'message' });
    },
    viewChat(doctorName,position,imageUrl) {
      this.$router.push({ name: 'ChatPage' ,params: { doctorName: doctorName,position: position,imageUrl: imageUrl }});
    },
    async fetchMessages() {
      try {
        const response = await axios.get('http://localhost:10086/api/doctor/doctor/findDoctorAll'); // 替换为你的后端 API 地址
        this.messages = response.data.data; // 假设后端返回的数据结构是 { data: [...messages] }
        this.isLoading = false;
      } catch (error) {
        console.error('Failed to fetch messages:', error);
        this.error = '未查询到数据';
        this.isLoading = false;
      }
    }
  },
    created() {
    this.fetchMessages(); // 在组件创建时加载数据
  }

}

</script>

<template>
  <div class="chat-list">

<!--  头部  -->
    <div class="header">
      <div class="arrow-left" @click="goBack">
        <svg class="ConsultationIcon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
          <path d="M333.994667 469.333333H853.333333v85.333334H333.994667l228.864 228.864-60.330667 60.330666L170.666667 512l331.861333-331.861333 60.330667 60.330666L333.994667 469.333333z" fill="#000000" p-id="2527"></path>
        </svg>
      </div>
      <span>聊天列表</span>
    </div>


    <!-- 加载中状态 -->
    <div v-if="isLoading" class="loading">
      加载中...
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error">
      {{ error }}
    </div>


    <!-- 聊天列表 -->
    <div v-else v-for="(item, index) in messages" :key="index" class="chat-item" @click="viewChat(item.doctorName,item.position,item.imageUrl)">
      <div class="avatar">
        <img :src="item.imageUrl" alt="Doctor Avatar" style="width: 35px ; height: 35px;"  />
      </div>
      <div class="message-content">
        <div class="user-name">{{ item.doctorName }}</div>
        <div class="message-text">{{ item.position }}</div>
      </div>
      <div class="arrow-right"></div>
    </div>


  </div>

</template>

<style scoped>
@import "Consultation.css";
</style>